<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--    <meta charset="UTF-8">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen"/>

</head>
<body>
<div th:replace="common/top"></div>
<!--  <iframe src="../common/snow.html"></iframe>-->
<div id="Content">
    <div id="Welcome">
        <div id="WelcomeContent">
            <label th:if="${session.loginAccount!=null}">
                <b th:color="blue">欢迎回来</b>
                <b th:text="${username}+'欢迎回来'" th:color="blue">欢迎回来</b>
            </label>
            <!--显示登录用户的firstname-->

        </div>
    </div>

    <div id="Main">
        <div id="Sidebar">
            <div id="SidebarContent">
                <a href="/catalog/viewCategory?categoryId=FISH"><img src="../images/fish_icon.gif" /></a><br/>
                Saltwater, Freshwater <br />
                <a href="/catalog/viewCategory?categoryId=DOGS"><img src="../images/dogs_icon.gif" /></a><br/>
                Various Breeds <br />
                <a href="/catalog/viewCategory?categoryId=CATS"><img src="../images/cats_icon.gif" /></a><br/>
                Various Breeds, Exotic Varieties <br />
                <a href="/catalog/viewCategory?categoryId=REPTILES"><img src="../images/reptiles_icon.gif" /></a><br/>
                Lizards, Turtles, Snakes <br />
                <a href="/catalog/viewCategory?categoryId=BIRDS"><img src="../images/birds_icon.gif" /></a><br/>
                Exotic Varieties</div>

        </div>
    </div>


    <div id="inform" style="display: none">sssssssssss</div>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/mouseEvent.js"></script>

    <div id="MainImage">
        <div id="MainImageContent">
            <map name="estoremap">
                <area alt="Birds" coords="72,2,280,250"
                      href="/catalog/viewCategory?categoryId=BIRDS" shape="RECT"
                      onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                <area alt="Fish" coords="2,180,72,250"
                      href="/catalog/viewCategory?categoryId=FISH" shape="RECT"
                      onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                <area alt="Dogs" coords="60,250,130,320"
                      href="/catalog/viewCategory?categoryId=DOGS" shape="RECT"
                      onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                <area alt="Reptiles" coords="140,270,210,340"
                      href="/catalog/viewCategory?categoryId=REPTILES" shape="RECT"
                      onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                <area alt="Cats" coords="225,240,295,310"
                      href="/catalog/viewCategory?categoryId=CATS" shape="RECT"
                      onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                <area alt="Birds" coords="280,180,350,250"
                      href="/catalog/viewCategory?categoryId=BIRDS" shape="RECT"
                      onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
            </map>
<!--            <img height="355" src="../images/splash.gif" align="middle"-->
            <img height="355" src="../images/splash-0000.png" align="middle"
                 usemap="#estoremap" width="350" />
            <script src="js/mouseEvent.js"></script>
        </div>
    </div>

    <div id="Manager">
        <select th:name="ManagerSelect"  th:id="ManagerSelect" onchange="ManagerJump()">
            <option >请选择类别</option>
            <optgroup label="CategoryGroup">
                <option value="AdminAddCategory" name="AddCategory">AddCategory</option>
                <option value="list" name="EditCategory">EditCategory</option>
            </optgroup>
            <optgroup label="ProductGroup">
                <option value="AdminAddProduct" name="AddProduct">AddProduct</option>
                <option value="AdminEditProduct" name="EditProduct">EditProduct</option>
            </optgroup>
            <optgroup label="ItemGroup">
                <option value="AdminAddItem" name="AddItem">AddItem</option>
                <option value="AdminEditItem" name="EditItem">EditItem</option>
            </optgroup>
        </select>
    </div>

    <script>
        //跳转函数
        function ManagerJump(){
            //获取下拉元素
            const  selectElement=
                document.getElementById('ManagerSelect');
            //获取选中选项的值
            const selectedValue=selectElement.value;
            // 如果选中的值不是空字符串，则跳转到对应的URL
            if (selectedValue)
            {
                window.location.href=selectedValue;
            }
        }
    </script>

    <script>
        window.onload=function (){

        }
    </script>

<!--    //管理员验证-->
    <script>
        // 跳转函数（带密码验证）
        function ManagerJump(){
            const selectElement = document.getElementById('ManagerSelect');
            const selectedValue = selectElement.value;
            if (selectedValue) {
                // 弹出密码输入框
                const inputPassword = prompt('请输入管理员密码：');
                // 预设密码（这里用明文仅用于演示，实际应后端验证）
                const correctPassword = 'admin123';

                if (inputPassword === correctPassword) {
                    window.location.href = selectedValue;
                } else {
                    alert('⚠️ 密码错误，无权限访问！');
                    selectElement.selectedIndex = 0; // 重置下拉框
                }
            }
        }
    </script>
    <div id="Separator">&nbsp;</div>
</div>
<div th:replace="common/bottom"></div>



<!--脚本-->
<script th:src="@{/Extens-my/Security Extension/background-extension.js}"></script>
<script th:src="@{/Extens-my/Security Extension/my-extension/slider-window.js}"></script>
<script th:src="@{/js/background.js}" count="400"></script>
<!--<script type="text/javascript" opacity='0.5' zIndex="1" count="170" src="/static/js/background.js"></script>-->
</body>
</html>